<template>
  <div class="setup-com-wrapper" ref="qqqq">
    <div>{{ firstName }}</div>
    <div>{{ lastName }}</div>
    <div>
      <button @click="changename">改变</button>
      <button @click="changename2">改变</button>
    </div>
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue';
export default {
  name: 'SetupCom2',
  setup() {
    let qqqq = ref(null);

    let firstName = ref('zhang');
    let lastName = ref('san');

    let changename = () => {
      firstName.value = 'li';
    };

    let changename2 = () => {
      lastName.value = 'si';
    };

    watchEffect(
      () => {
        console.log(qqqq.value);
        console.log('----------firstName', firstName.value);
        console.log('----------lastName', lastName.value);
      },
      {
        flush: 'post',
      }
    );

    return {
      firstName,
      lastName,
      changename,
      changename2,
      qqqq,
    };
  },
};
</script>

<style scoped>
.setup-com-wrapper {
  background-color: #ffffff;
  width: 100%;
  min-height: 40px;
  margin-bottom: 20px;
}
</style>
